<script setup>
import {reactive, ref} from "vue";
  import axios from '../util/axios.js'

  const downloading = ref(false)
  const elementLoadingText = ref("")

  const viewData = reactive({
    projects: [],
    defaultProps: {
      children: 'children',
      label: 'name',
    }
  })

  const loadProjects = async () => {
    await axios.get("/images/list").then(res => {
      // viewData.projects = res.data
      return res.data
    })
  }

  const loadNode = async (node, resolve) => {
    if (node.level === 0) {
      axios.get("/harbor/projects/list").then(res => {
        resolve(res.data)
      })
    } else if (node.level === 1) {
      axios.get("/harbor/images/list?projectName=" + node.data.name).then(res => {
        resolve(res.data)
      })
    } else if (node.level === 2) {
      axios.get("/harbor/artifacts/list?projectName=" + node.parent.data.name + "&imageName=" + node.data.name.split("/")[1]).then(res => {
        resolve(res.data[0].tags)
      })
    } else if (node.level === 3) {
      resolve([])
    }
  }

  const download = (node) => {
    let downLoadUrl = "/harbor/download/image?projectName=" + node.parent.parent.data.name + "&imageName=" + node.parent.data.name.split("/")[1] + "&tagName=" + node.data.name
    fetch(downLoadUrl)
        .then(response => {
          let filename = 'example.tar';  // 默认文件名
          const disposition = response.headers.get('Content-Disposition');
          const matches = /filename="([^"]*)"/.exec(disposition);
          if (matches != null && matches[1]) {
            filename = matches[1];
          }
          return response.blob().then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;  // 使用从 header 中提取的文件名
            link.click();
          });
        })
        .catch(error => console.error('Error downloading the tar file:', error))
    // axios.get("/harbor/download/image?projectName=" + node.parent.parent.data.name + "&imageName=" + node.parent.data.name.split("/")[1] + "&tagName=" + node.data.name).then(res => {
    //   console.log(res)
    // })
    // console.log(node)
    // downloading.value = true
    // console.log(node.parent.parent.data.name, node.parent.data.name.split("/")[1], node.data.name)
    // const source= new EventSource("/harbor/download/image?projectName=" + node.parent.parent.data.name + "&imageName=" + node.parent.data.name.split("/")[1] + "&tagName=" + node.data.name)
    // source.addEventListener('open', (e) => {
    //   console.log('open', e)
    // }, false)
    //
    // source.addEventListener('message', (e) => {
    //   console.log('message', e)
    // })
    //
    // source.addEventListener('error', (e) => {
    //   console.log('error', e)
    // }, false)
  }
  // loadProjects()
</script>

<template>
  <div v-loading="downloading" :element-loading-text="elementLoadingText">
<!--    :data="viewData.projects"-->

    <el-tree
        :props="viewData.defaultProps"
        lazy
        :load="loadNode"
    >
      <template #default="{ node, data }">
        <span v-if="data.artifact_id">
          <span>
            {{ data.name }}
          </span>

          <span style="margin-left: 200px;" @click="download(node)">
            下载
          </span>
        </span>
        <span v-else>
          <span>
            {{ data.name }}
          </span>
        </span>
      </template>
    </el-tree>

  </div>


</template>

<style scoped>

</style>